<template>
  <div id="app">
    {{name}}
    <p>{{age}}</p>
    <button @click="plusOne()">+</button>
    <div>
    	<children></children>
    </div>
  </div>
</template>

<script>
// 1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间  也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的
// 2、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined	
// 3、setup函数只能是同步的不能是异步的	
// 4、setup函数提供了两个参数 props和context,由于setup函数里没有了this,在 vue3.0 中，访问他们变成以下形式： this.xxx=》context.xxx	
// 5、在methods等函数中 用 this.xxx==访问或者改变  在 setup函数里用xxx.value改变值
import {ref} from 'vue'
import children from'@/components/children';
import userA from'@/api/public';
console.log(userA())
export default {
  name:'app',
  data(){
    return {
      name:'xiaosan'
    }
  },
  components:{
  	children
  },
  setup(){
    const name =ref('小四')
    const age=ref(18)
    function plusOne(){
      age.value++ //想改变值或获取值 必须.value
    }
    return { //必须返回 模板中才能使用
      name,age,plusOne
    }
  }
}
</script>